<template>
  <div class="box">
    <div class="boxleft">
      <div class="leftTableTop">
        <titlemessage :list="list.resources"></titlemessage>
        <div class="networkTable">
          <fivenetwork
            :tableList="fiveNetworkTh"
            :tableCentent="fiveNetworkConten"
          ></fivenetwork>
        </div>
      </div>
      <div class="leftEcharts">
        <titlemessage :list="list.fictitious"></titlemessage>
        <div class="echartsLine">
          <TestEcharts :option="option"> </TestEcharts>
        </div>
      </div>
    </div>
    <div class="boxCentenMap">
      <div class="map">
        <fivemap></fivemap>
      </div>
      <div class="mapBottom">
        <titlemessage :list="list.business"></titlemessage>
        <div class="radiogImg">
          <borderBlue :border="one"> </borderBlue>
          <borderRed :border="two"> </borderRed>
          <borderBlue :border="three"> </borderBlue>
          <borderRed :border="four"> </borderRed>
        </div>
      </div>
    </div>
    <div class="boxRight">
      <div class="rightTopMessage">
        <titlemessage :list="list.object"></titlemessage>
        <div class="rightTable">
          <fivedeliver
            :tableList="privateNetworkTh"
            :tableCentent="privateNetworkConten"
          ></fivedeliver>
        </div>
      </div>
      <div class="rightCenten">
        <titlemessage :list="list.security"></titlemessage>
        <div class="rightBottom">
          <div class="textCenten">
            <span>“风筝”方案</span>
            <div class="rightText">
              针对高可靠性需求的专网客户，推荐使用“风筝方案”。通过在客户园区下沉控制面“逃生”平面，可满足在与大区承载网断链或大区双DC均故障的紧急场景下，客户业务可以承载在园区“逃生”平面。
            </div>
          </div>
          <div class="textCentenBottom">
            <span>专网方案（MEC+切片)</span>
            <div class="rightText">
              针对独占无线基站场景，推荐使用”切片”技术来屏蔽对大网用户的影响，当前集团切片管理平台已实现切片+MEC一键式开通。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import TestEcharts from "../components/echarts.vue"; //封装图表组件
import titlemessage from "../components/titleMessage.vue"; //标题组件
import fivenetwork from "../components/tableAllHome/fivenetwork.vue"; //5GtoB网络组网架构
import fivedeliver from "../components/tableAllHome/fivedeliver.vue"; //5GtoB交付
import fivemap from "../components/fivemap.vue"; //3d地图组件
import borderBlue from "../components/borderBlue.vue"; //上升边框组件
import borderRed from "../components/borderRed.vue"; //下降边框组件
import {
  getArchitecture,
  getDelivery,
  getOperation,
  getCustomer,
  getUserUsage,
} from "../api/main"; //封装的请求
import {
  ref,
  reactive,
  computed,
  getCurrentInstance,
  onMounted,
  watch,
  nexttick,
} from "vue";

//5GtoB网络运行情况
const one = {
  nameVal: "专网客户",
  value: "16",
  percentage: "6.67%",
};
const two = {
  nameVal: "大流量卡在线用户数",
  value: "25W",
  percentage: "4.2%",
};
const three = {
  nameVal: "总在线用户",
  value: "14112",
  percentage: "23.31%",
};
const four = {
  nameVal: "吞吐量Gbps/ 利用率",
  value: "56/29%",
  percentage: "1.3%",
};

//5GtoB网络组网架构头部
const fiveNetworkTh = ref([
  {
    thName: "设备",
  },
  {
    thName: "城市",
  },
  {
    thName: "网络功能",
  },
  {
    thName: "提供服务",
  },
]);

//5GtoB网络组网架构内容
const fiveNetworkConten = ref([
  // {
  //   equipment: "AMF/SMF/NRF/NSSF/NSMF",
  //   city: "郑州",
  //   control: "控制面设备",
  //   details: "郑州大区所辖业务控制面管理",
  // },
  // {
  //   equipment: "UDM/PCF",
  //   city: "南京",
  //   control: "用户签约管理",
  //   details: "南京大区所辖业务开户签约管理",
  // },
  // {
  //   equipment: "UPF700/750",
  //   city: "武汉",
  //   control: "用户面设备",
  //   details:
  //     "各类物网用户接入：4G大流量卡、VPDN物网专线（GRE/L2TP）、物网公众用户和大用户（定制专属DNN）",
  // },
  // {
  //   equipment: "MEC/UPF",
  //   city: "武汉、宜昌、十堰、襄阳",
  //   control: "用户边缘接入设备",
  //   details: "5G专网用户接入服务，目前已部署四个地市，可按需下沉",
  // },
]);

//5G专网交付情况头部
const privateNetworkTh = ref([
  {
    thName: "项目名称",
  },
  {
    thName: "行业",
  },
  {
    thName: "实施阶段",
  },
  {
    thName: "下一步计划",
  },
]);

//5G专网交付情况内容
const privateNetworkConten = ref([
  // {
  //   equipment: "武汉达能数字工厂",
  //   city: "工业",
  //   control: "售中交付阶段",
  //   details: "抓紧施工，确保如期交付",
  // },
  // {
  //   equipment: "武汉市第一医院",
  //   city: "医疗",
  //   control: "售前测试阶段",
  //   details: "测试完成后签订合同",
  // },
  // {
  //   equipment: "江汉油田职校",
  //   city: "教育",
  //   control: "已完成方案评审，投标中",
  //   details: "中标后项目施工",
  // },
  // {
  //   equipment: "施耐德5G工厂",
  //   city: "工业",
  //   control: "全国项目，集团统一投标已中标",
  //   details: "待合同签订后项目施工",
  // },
  // {
  //   equipment: "楚能智慧工厂",
  //   city: "工业",
  //   control: "售前支撑阶段",
  //   details: "中标后项目施工",
  // },
]);

//标题组件传值
const list = ref({
  resources: "5GtoB网络组网架构",
  fictitious: "5G专网行业分布",
  business: "5GtoB网络运行情况",
  object: "5G专网交付情况",
  security: "5G专网典型应用场景推荐",
});

//vCPU核折线图
const option = reactive({
  title: {
    text: "专网客户人数", //主标题
    itemGap: 15, //主副标题之间间距
    top: 25,
    textStyle: {
      //文字颜色
      color: "#8E939A",
      //字体风格,'normal','italic','oblique'
      fontStyle: "normal",
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: "bold",
      //字体系列
      fontFamily: "sans-serif",
      //字体大小
      fontSize: 12,
    },
  },
  tooltip: {
    // trigger: "axis",
    // trigger: "item",
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "rgba(2, 140, 218, 0.8)",
    extraCssText: "box-shadow: 0 0 0 rgba(0, 0, 0, 0);",
    zIndex: 400,
    textStyle: {
      color: "#ffffff",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: "#8E939A",
          fontSize: 10,
        },
      },
      data: [
        "食品",
        "车企",
        "通信",
        "电子",
        "医疗",
        "烟草",
        "金融",
        "政府机关",
      ],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: "#8E939A",
          fontSize: 12,
          margin: 15,
        },
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      },
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.2)",
          width: 1,
          type: "solid",
        },
      },
      splitLine: {
        //x轴虚线设置
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.2)",
        },
      },
    },
  ],
  series: [
    {
      name: "行业",
      type: "bar",
      barWidth: "20", //设置柱状图宽度
      data: [1, 5, 1, 4, 2, 1, 1, 1],
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#BAC6CC",
          fontSize: 12,
        },
      },
      itemStyle: {
        color: {
          type: "linear", // 线性渐变
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(2, 140, 218, 0.1)", // 0%处的颜色为红色，上
            },
            {
              offset: 1,
              color: "rgba(2, 140, 218, 1)", // 100%处的颜色为蓝，下
            },
          ],
        },
      },
    },
  ],
});

//5GtoB网络组网架构
getArchitecture().then((r) => {
  console.log(r.data);
  fiveNetworkConten.value = r.data;
});

//5G专网项目交付情况
getDelivery().then((r) => {
  console.log(r.data);
  privateNetworkConten.value = r.data;
});

getOperation().then((r) => {
  console.log(r.data);
});

onMounted(() => {});
</script>
<style lang='less' scoped>
.box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5% 2%;
  .boxleft {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .leftTableTop {
      width: 100%;
      height: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .networkTable {
        width: 100%;
        height: 81%;
      }
    }
    .leftEcharts {
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .echartsLine {
        width: 100%;
        height: 90%;
      }
    }
  }
  .boxCentenMap {
    width: 40%;
    min-width: 700px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .map {
      width: 98%;
      margin: 0 auto;
      height: 65%;
    }
    .mapBottom {
      width: 75%;
      margin: 0 auto;
      height: 35%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .radiogImg {
        width: 100%;
        height: 75%;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
      }
    }
  }
  .boxRight {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .rightTopMessage {
      width: 100%;
      height: 48%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .rightTable {
        width: 100%;
        height: 88%;
      }
    }
    .rightCenten {
      width: 100%;
      height: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .rightBottom {
        width: 100%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .textCenten {
          height: 48%;
        }
        .textCentenBottom {
          height: 45%;
        }
        .textCenten,
        .textCentenBottom {
          width: 100%;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid rgba(2, 140, 218, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            font-size: 16px;
            color: #bac6cc;
            text-align: center;
            width: 30%;
            display: block;
          }
          .rightText {
            padding: 0 15px;
            width: 70%;
            font-size: 14px;
            color: #8e939a;
          }
        }
      }
    }
  }
}
</style>

